<template>
  <div class="container"></div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  width: 100vw;
  height: 300rpx;
  background: url("@/static/1111.png") repeat-x; /* 水平方向重复图像 */
  background-size: contain; /* 确保图片根据视口大小进行缩放 */
  animation: scroll 60s ease-in-out infinite;
}

@keyframes scroll {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: -100vw 0; /* 向左移动整个视口宽度 */
  }
  100% {
    background-position: 0 0; /* 移动回到初始位置 */
  }
}
</style>
